<template>
  <div>
    <p><h3>组件</h3></p>
    <p>1. template必须要有，script和style即便没有，也可以展示</p>

    <p>2. template只能存在一个根组件</p>

    <p>3. script: data(){} 必须是一个纯函数</p>

    <p>4. style: scoped表示样式只在当前组件中生效</p>

    <p>5. 组件的复用，父组件给子组件传参：</p>
    <ChildComponent01 checkLabel="Jack"/>
    <ChildComponent01 checkLabel="Rose"/>
    <ChildComponent01 checkLabel="Maria"/>

    <p>6. 给子组件传参 方式2</p>
    <p>注：type可以支持：String
      Number
      Boolean
      Array
      Object
      Date
      Function
      Symbol</p>
    <ChildComponent02 title="标题01"/>
    <ChildComponent02 title="标题02" :age=ageBind :friends=frs />
  </div>
</template>

<script>
    import ChildComponent01 from "./ChildComponent01";
    import ChildComponent02 from "./ChildComponent02";
    export default {
      name: "MyComponent01",
      data() {
        return {
          frs: ['张三', '李思思'],
          ageBind: 20
        };
      },
      components: {ChildComponent02, ChildComponent01}
    }
</script>

<style scoped>
  p {
    color: red;
  }
</style>
